<template>
  <div class="register">
    <!-- 页面预加载 -->
    <div v-if="pageLoading" class="page-loading">
      <el-spin tip="页面加载中..." />
    </div>

    <!-- 注册表单 -->
    <el-card v-else class="box-card">
      <div slot="header" class="clearfix">
        <span class="card-title">用户注册</span>
      </div>

      <el-form :model="form" ref="form" :rules="rules">
        <!-- 角色选择 -->
        <el-form-item label="角色" prop="role">
          <el-select v-model="form.role" placeholder="请选择角色">
            <el-option label="学生" value="student"></el-option>
            <el-option label="家长" value="parent"></el-option>
          </el-select>
        </el-form-item>

        <!-- 用户名 -->
        <el-form-item label="用户名" prop="userName">
          <el-input v-model="form.userName" placeholder="请输入用户名" />
        </el-form-item>

        <!-- 密码 -->
        <el-form-item label="密码" prop="passWord">
          <el-input
            v-model="form.passWord"
            show-password
            placeholder="请输入密码"
          />
        </el-form-item>

        <!-- 按钮组 -->
        <el-form-item>
          <div class="group">
            <el-button
              type="primary"
              :loading="btnLoading"
              @click="register('form')"
              >注册</el-button
            >
            <el-button @click="$router.push('/login')">
              已有账号？去登录
            </el-button>
          </div>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import { nameRule, passRule, roleRule } from "@/utils/validate";
import { registerApi } from "@/api/auth";

export default {
  name: "RegisterPage",
  data() {
    return {
      form: {
        userName: "",
        passWord: "",
        role: "",
      },
      rules: {
        userName: [{ validator: nameRule, trigger: "blur" }],
        passWord: [{ validator: passRule, trigger: "blur" }],
        role: [{ validator: roleRule, trigger: "change" }],
      },
      pageLoading: true, // 页面预加载
      btnLoading: false, // 按钮加载
    };
  },
  created() {
    this.preload();
  },
  methods: {
    async preload() {
      try {
        // 背景图预加载
        const img = new Image();
        img.src = require("@/assets/image1.png");
        await new Promise((resolve) => {
          img.onload = resolve;
          img.onerror = resolve;
        });

        // 模拟接口延迟
        await new Promise((resolve) => setTimeout(resolve, 400));
      } catch (e) {
        console.error("预加载失败", e);
      } finally {
        this.pageLoading = false;
      }
    },

    async register(formRef) {
      this.$refs[formRef].validate(async (valid) => {
        if (!valid) return;

        const payload = {
          userName: this.form.userName,
          passWord: this.form.passWord,
          role: this.form.role,
        };

        try {
          this.btnLoading = true;
          const res = await registerApi(payload);
          if (res.code === 200) {
            this.$message.success("注册成功，请登录");
            this.$router.push("/login");
          } else {
            this.$message.error(res.message || "注册失败");
          }
        } catch (err) {
          console.error("注册异常", err);
          this.$message.error("服务器异常，请稍后重试");
        } finally {
          this.btnLoading = false;
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.register {
  width: 100%;
  height: 100%;
  position: absolute;
  background: url("@/assets/ljylxl.webp") no-repeat center/cover;
  background-color: rgba(220, 239, 244, 0.03);
  background-blend-mode: overlay;
  filter: brightness(1.1);

  .page-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    backdrop-filter: blur(8px);
    background: rgba(255, 255, 255, 0.2);
  }

  .box-card {
    width: 700px;
    margin: 150px auto;
    background: rgba(255, 255, 255, 0.25); /* 半透明 */
    backdrop-filter: blur(12px); /* 毛玻璃 */
    border-radius: 16px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);

    .card-title {
      font-weight: bold;
      font-size: 24px;
      text-align: center;
      display: block;
    }

    .el-form-item {
      margin-bottom: 20px;
    }

    .group {
      display: flex;
      gap: 10px;
      justify-content: center;

      .el-button {
        flex: 1;
        min-width: 120px;
      }
    }
  }
}
</style>
